<template>
  <div class="noticeSystem">
    <div class="all-info-c-h">
      <input type="checkbox" v-model="checkAll" autocomplete="off" @click="infoSelAll()">
      <span>全选</span>
      <button @click="readNotice()">标记已读</button>
      <button @click="removeNotice()">批量删除</button>
      <select id="infoclass" v-model="searchData.messageType">
        <option style="visibility: hidden" value="">选择类别</option>
        <option value="">全部</option>
        <option value="100101">系统消息</option>
        <option value="100102">专家消息</option>
        <option value="100103">通知消息</option>
      </select>
      <select id="infostate" v-model="searchData.readStatus">
        <option style="visibility: hidden" value="">选择状态</option>
        <option value="">全部</option>
        <option value="1">已读</option>
        <option value="0">未读</option>
      </select>
      <button class="info-h-sec" @click="searchEvent()">搜索</button>
    </div>
    <div class="all-info-c-lis">
      <ul v-if="noticeData.list.length" id="info-lis">
        <li data-code="0" v-for="item in noticeData.list" :key="item.id">
          <input type="checkbox" v-model="item.check" autocomplete="off" name="infosel">
          <img v-if="item.readStatus === 0" src="../../assets/wd-info.png" name="infotip">
          <img v-if="item.readStatus === 1" src="../../assets/yd-info.png" name="infotip">
          <span class="info-clf text-overflow" data-code="2">{{item.messageTitle}}</span>
          <span class="info-title">
            <a href="javascript:void(0)" @click="$router.push('/noticeDetail/index?id='+item.id)">{{item.messageContent}}</a>
          </span>
          <span class="info-time">{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </li>
      </ul>
      <div class="no-list" v-if="!noticeData.list.length&&!loading">
        暂无此类消息
      </div>
    </div>
    <!--** 分页 ***-->
    <laypage v-if="total" :pageSize.sync="pageSize" :total="total" :pageNum.sync="pageNum" @changePage="getSystemMessage"></laypage>
    <!--** 分页 end ***-->
  </div>
</template>
<script>
import * as api from '@/service/api'
import Laypage from '@/components/laypage'
export default {
  data () {
    return {
      loading: false,
      pageSize: 10,
      pageNum: 1,
      total: null,
      globalThis: null,
      checkAll: false,
      searchData: {
        messageType: '',
        readStatus: ''
      },
      noticeData: {
        list: []
      }
    }
  },
  components: {
    Laypage
  },
  created () {
    this.globalThis = window
    this.pageNum = 1
    this.getSystemMessage()
  },
  methods: {
    async getSystemMessage (page) {
      if (page) {
        this.pageNum = page
      }
      try {
        this.loading = true
        let res = await api.getSystemMessage({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          ...this.searchData
        })
        this.noticeData = res.data
        this.total = this.noticeData.total
        this.noticeData.list.map((item) => {
          item.check = false
        })
        if (this.pageNum === 1) {
          // this.showPage()
        }
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    searchEvent () {
      this.pageNum = 1
      this.getSystemMessage()
    },
    async readNotice () {
      try {
        let curIds = []
        this.noticeData.list.map((item) => {
          if (item.check) {
            curIds.push(item.id)
          }
        })
        await api.readNotice({
          ids: curIds.join(',')
        })
        this.getSystemMessage()
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async removeNotice () {
      try {
        let curIds = []
        this.noticeData.list.map((item) => {
          if (item.check) {
            curIds.push(item.id)
          }
        })
        await api.removeNotice({
          ids: curIds.join(',')
        })
        this.getSystemMessage()
      } catch (e) {
        console.log(e)
      }
    },
    infoSelAll () {
      console.log(this.checkAll)
      if (!this.checkAll) {
        this.noticeData.list.map((item) => {
          item.check = true
        })
      } else {
        this.noticeData.list.map((item) => {
          item.check = false
        })
      }
    }
  }
}
</script>
<style lang="scss">
.noticeSystem {
  .no-list {
    padding: 30px;
    text-align: center;
    color: #b2b2b2;
  }
}
</style>
